<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Personal Trip</title>
<script src="../js/jquery.validate.min.js" type="text/javascript"></script>
<script src="../js/date.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
  jQuery(document).ready(function(){
   //jQuery("#ajaxButton").click(function(){
	//var name = $('#user').val();
	var cityID = "1";
	var clickNumber = "0";
    jQuery.ajax({
     type:"POST",
     url:"../jsp/EditPersonalTrip.jsp",
     data: { 
    	 cityID: cityID,
    	 clickNumber: clickNumber,
           },
     success:function(html){
      //jQuery("#responseDiv").text(html);
      var response = $(html);
      //var oneval = response.filter('#one').text();
      $("#arrivalDate").val(response.filter('#arrivalDate').text());
      $("#departureDate").val(response.filter('#departureDate').text());
      $("#city").html(response.filter('#cities').html());
      $("#district").html(response.filter('#districts').html());
      //jQuery("#user").val(response.filter('#one').text());
      $("#numberOfGuests").val(response.filter('#numberOfGuests').text());
      $("#maxPrice").val(response.filter('#maxPrice').text());
      //$("#minStayDay").val(response.filter('#one').text());
     }
    });
   //});
   $('#city').change(function() {
    	cityID = $('#city option:selected').val();
    	clickNumber = "1";
        jQuery.ajax({
         type:"POST",
         url:"../jsp/EditPersonalTrip.jsp",
         data: { 
        	 cityID: cityID,
        	 clickNumber: clickNumber,
               },
         success:function(html){
          //jQuery("#responseDiv").text(html);
          var response = $(html);
          //var oneval = response.filter('#one').text();
          //$("#city").html(response.filter('#cities').html());
          $("#district").html(response.filter('#districts').html());
         }
    	});
   });
  });
</script>
<script type="text/javascript">
	$(document).ready(function(){
		$.validator.addMethod(
			    "checkDate",
			    function(value, element) {
				       		return Date.parseExact(value, "yyyy-MM-dd");
			    },
			    "Please enter with format yyyy-MM-dd or this date isn't correct"
			);
		$.validator.addMethod(
			    "isDate",
			    function(value, element) {
			    	return Date.parse(value)>new Date();
			    },
			    "ArrivalDate or DepartureDate can't be smaller than today"
			);
		$("#editGuestProfile").validate({
			errorElement: "span",
			rules: {
				date : {
					checkDate : true,
					isDate : true
				}
			}
		});
		//$("#editGuestProfile").validate({
			//errorElement: "span",
		//});
	});
</script>
</head>
<body>
	<h1>Edit personal trip</h1>

		<form id="editPersonalTrip" method="post" action="../EditPersonalTrip">

			<div id="city"></div><br><br>

			<div id="district"></div><br><br>

			<label>Arrival Date<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input id="arrivalDate" class="date1" type="text" name="arrivalDate"><br><br>

			<label>Departure Date<span class="rq"> * </span></label>&nbsp;&nbsp;&nbsp;
								<input id="departureDate" class="date1" type="text" name="departureDate"><br><br>
								
			<label>Number of Guests<span class="rq"></span></label>&nbsp;
			<input id="numberOfGuests" class="required digits" type="text" name="numberOfGuests"><br><br>

			<label>Max Price<span class="rsq"></span></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input id="maxPrice" type="text" name="maxPrice">&nbsp;USD<br><br>
								
			<input type="submit" name="Save" value="Save"><br><br>

		</form>
	</div>
</body>
</html>